﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> bootstrap动态网格拖拽组件 - www.bootstrapmb.com</title>
    <link rel='stylesheet' href='http://cdn.bootstrapmb.com/bootstrap/4.1.3/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>
    <!-- partial:index.partial.html -->
    <div class="col-sm-12 form-group">

    </div>
    <div class="col-sm-12">
        <div class="row">
            <div class="grid-settings">

                <div class="form-check display-inline view-gridlines-div">
                    <label class="view-gridlines-label">显示网格线?</label>
                    <div class="toggle">
                        <input type="checkbox" id="toggle1" class="togglegridlines" checked>
                        <label for="toggle1"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

            <div class="col-sm-12">
                <div id="zone_div">
                    <div class="flexgrid-container" style="width: 500px;">
                        <div class="flexgrid-helper">
                            <div class="add-row"></div>
                            <div class="remove-row"></div>
                            <button class="btn btn-sm clear-flexgrid">删除</button>
                            <button class="btn btn-sm fg-add-widget">添加</button>
                            <button class="btn btn-sm save-flexgrid"><i class="fas fa-save"></i></button>
                        </div>
                        <div class="flexgrid-grid"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <label class="widget-holder-label">小部件:</label>
    <div class="widget-holder">
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
        <div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
    </div>
    <label class="nested-holder-label">嵌套小部件</label>
    <div class="nested-holder">
        <div class="nested-widget cloner">
            <div class="nested-widget-inner">
                <div class="remove-nested-widget"><i class="fas fa-times"></i></div>
                <div class="nested-widget-txt">cloner</div>
            </div>
        </div>
        <div class="nested-widget" data-cs-height="300">
            <div class="nested-widget-inner">
                <div class="remove-nested-widget"><i class="fas fa-times"></i></div>
                <div class="nested-widget-txt">1</div>
            </div>
        </div>
        <div class="nested-widget" data-cs-height="400">
            <div class="nested-widget-inner">
                <div class="remove-nested-widget"><i class="fas fa-times"></i></div>
                <div class="nested-widget-txt">2</div>
            </div>
        </div>
        <div class="nested-widget">
            <div class="nested-widget-inner">
                <div class="remove-nested-widget"><i class="fas fa-times"></i></div>
                <div class="nested-widget-txt">3</div>
            </div>
        </div>
        <div class="nested-widget">
            <div class="nested-widget-inner">
                <div class="remove-nested-widget"><i class="fas fa-times"></i></div>
                <div class="nested-widget-txt">4</div>
            </div>
        </div>
    </div>
    <!-- partial -->
    <script src='jquery.min.js'></script>
    <script src='jquery-ui.js'></script>
    <script src='jquery.ui.touch-punch.min.js'></script>
    <script src="./script.js"></script>
</body>
</html>
